<template>
	<view class="container">
		<!-- 返回按钮 -->
		<!-- <view class="header">
      <navigator open-type="navigateBack" delta="1" class="back-button">
        <image src="http://localhost:8080/1.png" class="back-icon"></image>
      </navigator>
    </view> -->

		<!-- 帖子内容 -->
		<scroll-view scroll-y class="post-content">
			<view class="author-info">
				<image :src="item.author.avatar" class="avatar"></image> <!-- 作者头像 -->
				<view class="info-details">
					<text class="nickname" style="color: black;font-weight: bold;">{{ item.author.nickname }}</text>
					<!-- 作者昵称 -->
					<text class="time">{{ item.time }}</text> <!-- 发布时间 -->
				</view>
			</view>
			<image :src="item.image" class="post-image" mode="widthFix"></image> <!-- 帖子图片 -->
			<text class="caption">{{ item.caption }}</text> <!-- 帖子标题 -->
			<text class="content">{{ item.content }}</text> <!-- 帖子内容-->
			<view class="divider-line"></view>
			<!-- 点赞和评论部分 -->
			<view class="interaction-section">
				<view class="icons-container">
					<view class="iconfont icon-pinglun" style="font-size: 24px;">
						<text style="font-size: 15px;">{{ item.down }} </text> <!-- 评论数 -->
					</view>
					<view class="iconfont icon-dianzan" style="font-size: 24px;">
						<text style="font-size: 15px;">{{ item.up }} </text><!-- 点赞 -->
					</view>
				</view>
				<input type="text" v-model="newComment" placeholder="说点什么吧~" class="comment-input" /> <!-- 评论输入框 -->
			</view>

			<!-- 评论列表 -->
			<view class="comments-section">
				<!-- <text class="section-title">评论</text> --> <!-- 评论标题 -->
				<view v-for="(comment, index) in comments" :key="index" class="comment-item">
					<image :src="comment.author.avatar" class="avatar"></image> <!-- 评论者头像 -->
					<view class="comment-details">
						<text class="nickname">{{ comment.author.nickname }}</text> <!-- 评论者昵称 -->
						<text class="comment-text">{{ comment.text }}</text> <!-- 评论内容 -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {}, // 用于存储传递过来的整个item对象
				comments: [], // 用于存储评论数据
				newComment: '' // 新评论内容
			};
		},
		onLoad(options) {
			// 获取传递的参数，解码，并转换回对象
			if (options.params) {
				const itemString = decodeURIComponent(options.params);
				this.item = JSON.parse(itemString);

				// 模拟加载评论数据
				this.loadComments();
			}
		},
		methods: {
			loadComments() {
				// 这里可以替换为实际的 API 请求
				this.comments = [{
						author: {
							avatar: 'http://localhost:8080/1.jpg', // 评论者头像地址
							nickname: '用户E', // 评论者昵称
						},
						text: '好棒！我也想去这家咖啡馆试试。', // 评论内容
					},
					{
						author: {
							avatar: 'http://localhost:8080/1.jpg', // 评论者头像地址
							nickname: '用户F', // 评论者昵称
						},
						text: '风景真美，下次也要去郊游！', // 评论内容
					},
					{
						author: {
							avatar: 'http://localhost:8080/1.jpg', // 评论者头像地址
							nickname: '用户G', // 评论者昵称
						},
						text: '裙子真的很好看，去哪里买的？', // 评论内容
					},
				];
			}
		}
	};
</script>

<style lang="scss">
	// @import '@/static/font/iconfont.css';

	.container {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
		height: 100vh;
		/* 设置高度为视口高度 */
		background-color: #f5f5f5;
		/* 背景颜色 */
		padding: 15px;
	}

	.post-content {
		flex: 1;
		/* 占据剩余空间 */
	}

	.author-info {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 子元素垂直居中 */
		margin-bottom: 10px;
		/* 下外边距 */
	}

	.content {
		display: block;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.divider-line {
		flex: 1;
		height: 0.5px;
		background-color: #ddd;
		margin-bottom: 12px;
	}

	.avatar {
		width: 40px;
		/* 头像宽度 */
		height: 40px;
		/* 头像高度 */
		border-radius: 50%;
		/* 圆角 */
		margin-right: 10px;
		/* 右外边距 */
	}

	.info-details {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
	}

	.nickname {
		font-size: 16px;
		/* 字体大小 */
		color: #8f8f8f;
	}

	.time {
		color: #999;
		/* 字体颜色 */
		font-size: 12px;
		/* 字体大小 */
	}

	.caption {
		font-size: 23px;
		/* 字体大小 */
		font-weight: 700;
		margin-bottom: 10px;
		/* 下外边距 */
	}

	.post-image {
		width: 100%;
		/* 宽度占满父容器 */
		border-radius: 10px;
		/* 圆角 */
		margin-bottom: 10px;
		/* 下外边距 */
	}

	.interaction-section {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 子元素垂直居中 */
		justify-content: space-between;
		/* 子元素两端对齐 */
		margin-bottom: 10px;
		/* 下外边距 */
	}

	.icons-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 子元素两端对齐 */
		width: 80px;
		/* 固定宽度以确保图标之间有空间 */
	}

	.iconfont {
		left: 1;
	}

	.comment-input {
		width: 200px;
		height: 24px;
		border: 1px solid #ccc;
		border-radius: 12px;
		padding: 0 10px;
		font-size: 14px;
	}

	.comments-section {
		margin-top: 10px;
		/* 上外边距 */
	}

	.section-title {
		font-size: 16px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗字体 */
	}

	.comment-item {
		display: flex;
		/* 使用 Flexbox 布局 */
		margin-bottom: 10px;
	}

	.comment-details {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
		margin-left: 3px;
		/* 左外边距 */
	}

	.comment-text {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		font-family: Arial;
	}
</style>